<template>
  <div class="pieChart">
    <Echarts autoresize ref="lines" class="lines" :option="option"></Echarts>
  </div>
</template>
<script>
import Echarts from "vue-echarts";
export default {
  data() {
    return {
      option: {
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(31, 45, 61, .75)",
          borderColor: "rgba(31, 45, 61, .75)",
          textStyle: {
            color: "#fff"
          },
          padding: [5, 10],
          axisPointer: {
            type: "none"
          },
          formatter: function(params) {
            console.log(params, "ssssssssssss");
            if (!params) return;
            let detail = `<div style="width: 210px;"><div style="font-size: 14px">北京市 ${params[0].name}</div>`;
            params.forEach(item => {
              detail += `<div>                                
                                <span style="background: ${item.color
                                  ?.colorStops[0]?.color || "#4188F3"};
                                            font-size: 12px;display: 
                                            inline-block;
                                            width: 8px;
                                            height: 8px; 
                                            border-radius: 2px;
                                            margin-right: 5px"></span>
                                <span style="font-size: 12px;color: #fff">${item?.seriesName ||
                                  ""}: ${item?.data || 0}${item?.unit ||
                "元"}</span>
                            </div>`;
            });
            detail += "</div>";
            return detail;
          }
        },
        color: ["#1890FF", "#62C7B0", "#90CFFF", "#91D393", "#CBE78A", "#FCD489"],
        legend: {
          type: "plain",
          show: true,
          top: "70%",
          bottom: 0,
          left: "center",
          itemGap: 20, //图例各项之间的间距，
          orient: "vertical",  //图例排列方式
          itemWidth: 8,
          itemHeight: 8,
          selectedMode: false,
          textStyle: {
            color: "#909399",
            fontSize: 12
          },
          icon: "roundRect",
          formatter: function (name) {
              return `${name}: `;
          }
        },
        grid: {
          left: 30,
          top: 40,
          bottom: 65,
          right: 10
        },
        dataZoom: [{
            type: "slider",
            show: true,
            height: 0,
            backgroundColor: "#fff",
            selectedDataBackground: {
                lineStyle: {
                    color: "#D8D8D8",
                }
            },
            xAxisIndex: [0],
            startValue: 0,
            endValue: 4,
            bottom: 30,
            handleIcon: "none",
            moveHandleIcon: "none",
            showDetail: false,
            moveHandleStyle: {
                color: "#D8D8D8",
                borderRadius: 3,
            },
            emphasis: {
                moveHandleStyle: {
                    color: "#b6b7b9"
                }
            }
        }],

        series: [
          {
            type: "pie",
            radius: [55, 75],
            emptyCircleStyle: {
              borderCap: "square"
            },
            center: ["50%", "35%"],
            data: [
              {
                name: "药费",
                value: "3600",
                unit: "万元"
              },
              {
                name: "检查费",
                value: "1200",
                unit: "万元"
              },
              {
                name: "手术费",
                value: "4500",
                unit: "万元"
              },
              {
                name: "床位费",
                value: "1800",
                unit: "万元"
              },
              {
                name: "诊疗费",
                value: "7800",
                unit: "万元"
              },
              {
                name: "其他费用",
                value: "8900",
                unit: "万元"
              },
            ],
            label: {
              show: false
            },
             selectedMode: false,
            showEmptyCircle: true,
            emphasis: {
              scale: true,
              scaleSize: 10,
            }
          },
        ]
      },
      legendData: {}
    };
  },
  components: {
    Echarts
  },
  watch: {
    data: {
      handler(val) {
        let obj = {};
        val?.series[0]?.data?.forEach(item => {
          // obj = 
          let percent = this.percentTool(val.series[0].data = [], item.value);
          console.log(item, obj);
          obj[name] = {...item, percent};
        })
        this.legendData = obj;
      }
    }
  },
  methods: {
    percentTool(data, key) {
      if(Array.isArray(data)) {
        return 0;
      }else {
      // 总计
       let result = data.reduce((count, item) => {
         let num = Number(item);
         if(isNaN(num) || Number(num) == 0) return 0;         
          return count + num;
        })
        // 计算占比
        if(isNaN(Number(key) || Number(key) == 0)) return 0;
        return (Number(key) / result).toFixed(2) + "%";
      }
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          totalCost: {
            name: "总费用",
            value: 2000,
            unit:"万元",
          },
          series: [
            {
              type: "pie",
              data: [
                {
                  name: "药费",
                  value: "3600",
                  unit: "万元"
                },
                {
                  name: "检查费",
                  value: "1200",
                  unit: "万元"
                },
                {
                  name: "手术费",
                  value: "4500",
                  unit: "万元"
                },
                {
                  name: "床位费",
                  value: "1800",
                  unit: "万元"
                },
                {
                  name: "诊疗费",
                  value: "7800",
                  unit: "万元"
                },
                {
                  name: "其他费用",
                  value: "8900",
                  unit: "万元"
                },
              ]
            }
          ]

        }
          
      }
    }
  }
};
</script>
<style lang="less" scoped>
.pieChart {
  width: 100%;
  height: 100%;
  margin-top: 5px;
}
</style>